<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">基本信息</span>
      </div>
      <el-row type="flex" justify='space-start' :gutter="15"> 
        <el-col :span="4"><div class='label'>公司名称：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.company_name ? desc_info.company_name : '未填'}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>薪资架构：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.salary_structure ? desc_info.salary_structure : '未填' }}</div>
        </el-col>
      </el-row>

      <el-row type="flex" justify='space-start' :gutter="15"> 
        <el-col :span="4"><div class='label'>公司全称：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.company_full_name ? desc_info.company_full_name : '未填'}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>公司产品：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.company_products ? desc_info.company_products : '未填' }}</div>
        </el-col>
      </el-row>

      <el-row type="flex" justify='space-start' :gutter="15">
        <el-col :span="4"><div class='label'>类型：</div></el-col>
        <el-col :span="8">
          <div  class='content'>
            <el-tag>{{ desc_info.company_type | companyTypeFilter }}</el-tag>
          </div>
        </el-col> 
        <el-col :span="4"><div class='label'>公司规模：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.company_size ? desc_info.company_size : '未填' }}</div>
        </el-col>
      </el-row>

      <el-row type="flex" justify='space-start' :gutter="15"> 
        <el-col :span="4"><div class='label'>发票抬头：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.invoice_title ? desc_info.invoice_title : '未填'}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>公司年产值：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{ desc_info.annual_output_value ? desc_info.annual_output_value  : '未填' }}</div>
        </el-col>
      </el-row>

      <el-row type="flex" justify='space-start' :gutter="15">
        <el-col :span="4"><div class='label'>行业：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.industry | industryFilter}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>公司同行竞争对手：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.company_competitors ? desc_info.company_competitors : '未填' }}</div>
        </el-col>
      </el-row>

      <el-row type="flex" justify='space-start' :gutter="15">
        <el-col :span="4"><div class='label'>城市：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.city | cityValFilter}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>上班时间：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.work_shift ? desc_info.work_shift : '未填' }}</div>
        </el-col>
      </el-row>

      <el-row type="flex" justify='space-start' :gutter="15">
        <el-col :span="4"><div class='label'>电话：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.telephone ? desc_info.telephone : '未填'}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>福利(保险、公积金)：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.welfare ? desc_info.welfare : '未填' }}</div>
        </el-col>
      </el-row> 

      <el-row type="flex" justify='space-start' :gutter="15">
        <el-col :span="4"><div class='label'>网址：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{desc_info.website ? desc_info.website : '未填'}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>福利(餐补、住宿、车补)：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.welfare2 ? desc_info.welfare2 : '未填' }}</div>
        </el-col>
      </el-row>

      <el-row type="flex" justify='space-start' :gutter="15">
        <el-col :span="4"><div class='label'>地址：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ desc_info.addres ? desc_info.address : '未填'}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>创建者：</div></el-col>
        <el-col :span="8">
          <div class='content'>{{desc_info.create_name ? desc_info.create_name : '未填' }}</div>
        </el-col>
      </el-row>
      <el-row type="flex" justify='space-start' :gutter="15">
        <el-col :span="4"><div class='label'>邮箱：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ desc_info.email ? desc_info.email : '未填'}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>创建日期：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ desc_info.create_date | timeFilter('{y}-{m}-{d} {h}:{i}') }}</div>
        </el-col>
      </el-row>   
      <el-row type="flex" justify='space-start' :gutter="15">
        <el-col :span="4"><div class='label'>BD：</div></el-col>
        <el-col :span="8">
          <div  class='content'>{{ (desc_info.bd && desc_info.bd.username) ? desc_info.bd.username  : '未填'}}</div>
        </el-col>
        <el-col :span="4"><div class='label'>客户经理：</div></el-col>
        <el-col :span="8">
          <div v-if="desc_info.clientManagers && desc_info.clientManagers.length > 0" class='content'>
            <span v-for="(item, index) in desc_info.clientManagers" >
              ({{item.department_name}}){{item.username}}<span v-if="(index+1) !== desc_info.clientManagers.length">,</span>
            </span> 
          </div>
          <div v-else class='content'>暂无</div>
        </el-col> 
      </el-row>   
      
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">客户简介</span>
      </div>
      <el-row type="flex" justify='space-start' :gutter="15"> 
        <el-col :span="2"><div class='label'></div></el-col>
        <el-col :span="22"><div class='content'>{{ desc_info.company_profile ? desc_info.company_profile : '未填'  }}</div></el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">匿名简介</span>
      </div>
      <el-row type="flex" justify='space-start' :gutter="15"> 
        <el-col :span="2"><div class='label'></div></el-col>
        <el-col :span="22"><div class='content'>{{ desc_info.anonymous_profile ? desc_info.anonymous_profile : '未填'  }}</div></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import API from '@/utils/backend_api'

export default {
  name: 'companyBase',
  props: {
    id: {
      type: String,
      default: '123' // 这样可以指定默认的值
    }
  },
  data() {
    return {
      desc_info: {
        clientManagers: []
      }
    }
  },
  filters: {
  },
  watch: {
    id: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      if (val) {
        API.company.get(val).then(response => {
          this.desc_info = response.data
        })
      }
    }
  },
  created() {
    if (this.id) {
      API.company.get(this.id).then(response => {
        this.desc_info = response.data
      })
    }
  },
  methods: {
  }
}
</script>
<style scoped>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .el-col {
    margin: 2px 0 4px;
  }
  .el-card{
    margin: 2px 0 4px;
  }

  .label {
    text-align:right;
    color:#939393;
    font-weight:normal;
  }

</style>
